<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div class="box">
        <h2>今天天气很{{info}}</h2>
        <button class="btn" @click="changeWeather">点我更换天气</button>
        <hr>
        <h2 @click="numbers.a++">a:{{numbers.a}}</h2>
        <h2 @click="numbers.b++">b:{{numbers.b}}</h2>

    </div>
</body>
<!-- 深度监视:
    (1).Vue中的watch默认不监测对象内部值的改变（一层）。
    (2).配置deep:true可以监测对象内部值改变（多层）。
    备注:
        (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
        (2).使用watch时根据数据的具体结构,决定是否采用深度监视。
 -->
 <!-- 
computed和watch之间的区别:
    1.computed能完成的功能,watch都可以完成。
    2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
    两个重要的小原则:
        1.所被Vue管理的函数,最好写成普通函数，这样this的指向才是vm或组件实例对象。
        2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数,promise的回调函数等)
            最好写成箭头函数，这样this的指向才是vm或组件实例对象。

  -->
<script>
    var head2 = document.querySelector('h2')
    var btn = document.querySelector('.btn')

    var vm = new Vue({
        el:'.box',
        data() {
            return {
                isHot:true,
                numbers:{
                    a:1,
                    b:1,
                }
            }
        },
        methods: {
            changeWeather(){
                this.isHot = this.isHot?false:true
            }
        },
        computed:{
            info:{
                get(){
                    return this.isHot?'炎热':'凉爽'
                }
            },
        },
        watch: {
            isHot:{
                handler(newValue,oldValue){
                    //当isHot发生改变时会调用
                }
            },
            numbers:{
                deep:true,//开启深度监视
                handler(){
                    console.log('numbers改变了');
                }
            }
        },
    })
</script>
</html>